<script>
import { reactive, toRefs, ref, getCurrentInstance } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      total: 0,
      pageSize: 10,
      tableData: [],
      tableLabel: ["flModelAdd", "flModelName", "flRecId", "flRem", "flSev", "floorId"],
      formDataGet: ["flModelAdd", "flModelName", "flRecId", "flRem", "flSev", "floorId"],
      formDataPost: ["flModelAdd", "flModelName", "flRecId", "flRem", "flSev", "floorId"],
      formDataPut: ["flModelAdd", "flModelName", "flRecId", "flRem", "flSev", "floorId"],
      mapLabel: { "flModelAdd": "楼层模型地址", "flModelName": "楼层模型名称", "flRecId": "楼层记录ID", "flRem": "楼层备注", "flSev": "楼层服务费", "floorId": "楼层ID" }
    });

    const tableRef = ref();

    const { proxy } = getCurrentInstance();

    const getTableData = async (currentPage, queryKey) => {
      const params = {
        pageNum: currentPage,
        pageSize: state.pageSize
      }
      const data = await proxy.$API.sysConfig.sysFloorList.get(params)
      state.total = data.total
      state.tableData = data.rows
    };

    const postTableData = async (data) => {
      const res = await proxy.$API.sysConfig.sysFloorPost.post(data)
      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    const deleteTableData = async (data) => {
      const params = {
        id: data.flRecId,
      }
      const res = await proxy.$API.sysConfig.sysFloorDelete.delete(params)
      if (res.code == 200) {
        //调用成功
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(data.msg);
      }
    };

    const putTableData = async (row, data) => {

      const res = await proxy.$API.sysConfig.sysFloorPut.put(data)

      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    return { ...toRefs(state), tableRef, getTableData, postTableData, deleteTableData, putTableData };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never">
      <Table ref="tableRef" deleteButton :tableLabel="tableLabel" :tableData="tableData" :mapLabel="mapLabel"
        :total="total" :pageSize="pageSize" :formDataGet="formDataGet" :formDataPost="formDataPost"
        :formDataPut="formDataPut" @getTableData="getTableData" @postTableData="postTableData"
        @deleteTableData="deleteTableData" @putTableData="putTableData" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>